<template>
  <div class="base-64">
    <div class="input">
      <el-input type="textarea" v-model="code" :rows="10" disabled></el-input>
    </div>
    <div class="toggle">
      <div>
        <el-button @click="paste">粘贴转化</el-button>
        <el-button @click="clear">清空</el-button>
      </div>
      <div><img :src="src" alt=""></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const code = ref('')
const src = ref('')
function paste() {
  navigator.clipboard.readText().then((clipText) => {
    code.value = clipText
    src.value = "data:image/png;base64," + code.value
  }).catch((err) => // console.log("粘贴失败！", err));
}
function clear() {
  code.value = ""
  src.value = ""
}
</script>

<style scoped lang="scss">
.input {
  width: 400px;
}

.toggle {
  width: 200px;
  margin: 20px 0;
  display: flex;

  >div {
    margin-right: 10px;
  }
}
</style>
